<template>
	<view>
		<view class="tabbar-wrap">
			<block v-for="(item, index) in list" :key="index">
				<view @click="onTab(item, index)" v-show="active !== index" class="tab-item">
					<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.iconPath"></image>
					<text class="txt" :style="{ color: color }">{{ item.text }}</text>
					<text v-if="count > 0 && index==2" class="number">{{count | maxNum}}</text>
				</view>
				<view @click="onTab(item, index)" v-show="active === index" class="tab-item">
					<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.selectedIconPath"></image>
					<text class="txt" :style="{ color: selectedColor }">{{ item.text }}</text>
					<text v-if="count > 0 && index==2" class="number">{{count | maxNum}}</text>
				</view>
			</block>
		</view>
		<!-- 中间按钮弹窗 -->
		<lf-popup v-model="showPopup">
			<view class="handle-wrap" v-if="isOpen==1">
				<view @click="handleJump(item)" class="item" v-for="(item,index) in popup" :key="index">
					<image mode="widthFix" class="icon" :src="item.icon"></image>
					<text class="txt">{{item.text}}</text>
				</view>
			</view>
			<view class="handle-wrap" v-if="isOpen==0">
				<view @click="handleJump(item)" class="item" v-for="(item,index) in popup2" :key="index">
					<image mode="widthFix" class="icon" :src="item.icon"></image>
					<text class="txt">{{item.text}}</text>
				</view>
			</view>
			<!-- <view class="handle-close">
				<u-icon @click="onClose" size="50rpx" name="close"></u-icon>
			</view> -->
		</lf-popup>
	</view>
</template>

<script>
	import tabbar from '../../components/my-tabbar/tabbar.js';
	export default {
		name: 'lf-tabbar',
		props: {
			//tab 上的文字默认颜色
			color: {
				type: String,
				default: '#8292A2'
			},
			//tab 上的文字选中时的颜色
			selectedColor: {
				type: String,
				default: '#1ABC9C'
			},
			active: {
				type: Number,
				default: 0
			},
			count: {
				type: Number,
				default: 0
			}
		},
		beforeCreate() {
			uni.hideTabBar();
		},
		filters: {
			maxNum(num) {
				if (num > 99) {
					return '99+'
				} else {
					return num
				}
			}
		},
		data() {
			return {
				isOpen: getApp().globalData.isOpen,
				list: tabbar.list,
				popup: tabbar.popup,
				showPopup: false,
				popup2: []
			};
		},
		methods: {
			onTab(e, index) {
				if (!e.isCustom) {
					// uni.redirectTo({
					// 	url: e.pagePath
					// })
					uni.switchTab({
						url: e.pagePath
					});
				}
				if (e.midButton) {
					this.showPopup = true;
				}

				this.$emit('click', e);
			},
			onClose() {
				this.showPopup = false;
			},
			handleJump(e) {
				uni.navigateTo({
					url: e.url
				})

				this.showPopup = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar-wrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 90;
        background-color: #fff;
        padding: 20px 0px 20px 0px;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
		border-top: 1px solid #f4f6f7;
		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			border-radius: 8px;
			position: relative;

			.icon {
				width: 24px;
				height: 24px;
			}

			.txt {
				margin-top: 3px;
				font-size: 12px;
			}

			.number {
				background-color: #FA3534;
				color: #fff;
				border-radius: 999px;
				position: absolute;
				right: 10rpx;
				top: 0;
				display: inline-block;
				padding: 0 3px;
				width: 20px;
				height: 20px;
				font-size: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.mid-button {
				width: 43px;
				height: 43px;
			}
		}

		.tab-item[hidden] {
			display: none !important;
		}
	}

	// 中间按钮弹出框
	.handle-wrap {
		display: flex;
		padding: 25px 0;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 10px 0;
			border-radius: 10px;

			.icon {
				width: 50px;
				margin-bottom: 10px;
			}

			.txt {
				font-size: 14px;
			}
		}
	}

	.handle-close {
		display: flex;
		justify-content: center;
		margin-bottom: 25px;
	}
</style>